<template>
    <h3>列表渲染</h3>

    <div>使用 v-for 渲染一个列表：</div>
    <p v-for="item in names">{{ item }}</p>
    <hr>

    <div>不一定非得 item ，名称不固定</div>
    <p v-for="name in names">{{ name }}</p>
    <hr>

    <div>模拟对获得的 json 数据的处理（通过遍历数组处理，数组中的每个元素都是一个 json 数据）</div>
    <div v-for="item in jsonData">
        <p>{{ item.data.zh }}</p>
        <!-- 使用 v-bind 绑定属性, src 是标签里的一个属性 -->
        <img v-bind:src="item.data.pic" alt="">
    </div>
    <hr>

    <div>可以使用双参数，第二个参数就是索引了</div>
    <p v-for="(item, index) in names">{{ item }} - {{ index }}</p>
    <hr>

    <div>也可以使用 of ，更接近迭代器的语法</div>
    <p v-for="item of names">{{ item }}</p>
    <hr>

    <div>使用 v-for 渲染一个对象</div>
    <div>使用单参数遍历每个值</div>
    <p v-for="item in obj">{{ item }}</p>
    <div>使用双参数遍历键和值</div>
    <p v-for="(value, key) in obj">键：{{ key }}，值：{{ value }}</p>
    <div>使用三参数遍历键、值和索引</div>
    <p v-for="(value, key, index) in obj">索引：{{ index }}，键：{{ key }}，值：{{ value }}</p>
</template>



<script>
export default {
    data() {
        return {
            names: ["张三", "李四", "王五"],
            jsonData: [  // 模拟 json 数据请求获得的响应
                {
                    "success": true,
                    "data": {
                        "zh": "失之毫厘，差之千里。 ",
                        "en": "A miss is as good as a mile. ",
                        "pic": "https://staticedu-wps.cache.iciba.com/image/9954d33bb52c98d59f19595581697507.jpg"
                    }
                }, {
                    "success": true,
                    "data": {
                        "zh": "不要等到孤独了，才明白朋友的价值。",
                        "en": "Don't wait to be lonely to recognize the value of a friend.",
                        "pic": "https://staticedu-wps.cache.iciba.com/image/fbf67d2d997105b9835632b862106167.jpg"
                    }
                }, {
                    "success": true,
                    "data": {
                        "zh": "我们变成了世上最熟悉的陌生人。",
                        "en": "We become the most familiar strangers .",
                        "pic": "https://staticedu-wps.cache.iciba.com/image/c13c845a3f6533ff44bdf1c3bf7c72c3.jpg"
                    }
                }
            ],
            obj: {
                "success": true,
                "data": {
                    "zh": "不要等到孤独了，才明白朋友的价值。",
                    "en": "Don't wait to be lonely to recognize the value of a friend.",
                    "pic": "https://staticedu-wps.cache.iciba.com/image/fbf67d2d997105b9835632b862106167.jpg"
                }
            }
        }
    }
}
</script>